<template>
  <van-cell-group>
    <van-popup v-model="popupVis" position="bottom" round get-container="body">
      <van-datetime-picker v-model="currentDate" :type="type" :title="title" @confirm="onConfirm" />
    </van-popup>
    <van-cell
      :title="title"
      :required="required == false ? false : true"
      @click="
        () => {
          if (!disable) popupVis = true
        }
      "
      :value="formatTime"
    >
      <template #right-icon>
        <van-icon name="calendar-o" class="calendar-o" />
      </template>
    </van-cell>
  </van-cell-group>
</template>
<script>
  import moment from 'moment'
  export default {
    props: ['required', 'value', 'title', 'type', 'minDate', 'maxDate', 'noDefault', 'disable'],
    data: function () {
      return {
        popupVis: false,
        currentDate: null,
      }
    },
    methods: {
      onConfirm: function () {
        this.$emit('input', this.formatTime)
        this.popupVis = false
      },
      onCancel: function () {
        this.popupVis = false
      },
    },
    computed: {
      formatTime() {
        switch (this.type) {
          case 'date':
            return moment(this.currentDate).format('YYYY.MM.DD')
          case 'month-day':
            return moment(this.currentDate).format('MM.DD')
          case 'time':
            return moment(this.currentDate).format('YYYY.MM.DD HH:mm:ss')
          case 'year-month':
            return moment(this.currentDate).format('YYYY.MM')
          case 'datehour':
            return moment(this.currentDate).format('YYYY.MM.DD HH:00')
          default:
            return moment(this.currentDate).format('YYYY.MM.DD HH:mm:ss')
        }
      },
    },
    // watch: {
    //   value: function () {
    //     if (this.currentDate == this.value) {
    //       return
    //     }
    //     if (!this.value && !this.noDefault) {
    //       var time = new Date()
    //       var year = time.getFullYear()
    //       var month = time.getMonth()
    //       var day = time.getDate()
    //       var hour = time.getHours()
    //       switch (this.type) {
    //         case 'date':
    //         case 'month-day':
    //           this.currentDate = new Date(year, month, day)
    //           break
    //         case 'year-month':
    //           this.currentDate = new Date(year, month)
    //           break
    //         case 'datehour':
    //           this.currentDate = new Date(year, month, day, hour)
    //           break
    //         case 'time':
    //         default:
    //           this.currentDate = new Date()
    //           break
    //       }
    //     } else {
    //       this.currentDate = this.value
    //     }
    //     this.$emit('input', this.formatTime)
    //   },
    // },
    mounted() {
      if (!this.value && !this.noDefault) {
        var time = new Date()
        var year = time.getFullYear()
        var month = time.getMonth()
        var day = time.getDate()
        var hour = time.getHours()
        switch (this.type) {
          case 'date':
          case 'month-day':
            this.currentDate = new Date(year, month, day)
            break
          case 'year-month':
            this.currentDate = new Date(year, month)
            break
          case 'datehour':
            this.currentDate = new Date(year, month, day, hour)
            break
          case 'time':
          default:
            this.currentDate = new Date()
            break
        }
        // console.log('jjjj' + this.currentDate)
      } else {
        this.currentDate = moment(this.value).toDate()
        // console.log('bbbb' + this.currentDate)
      }
      this.$emit('input', this.formatTime)
    },
  }
</script>
<style scoped>
  .calendar-o {
    font-size: 20px;
    line-height: inherit;
    margin-left: 10px;
  }
</style>
